<template>
	<view class="navBar">
		<up-navbar safeAreaInsetTop :placeholder="barFixed" :bgColor="bgColor" @rightClick="rightClick"
			:autoBack="backStatus" :border="borderStatus" :leftIconColor="leftIconColor" :leftText="leftText"
			:leftIconSize="leftIconSize">
			<template #left>
				<view class="u-nav-slot flex-start">
					<up-icon name="arrow-left" v-if="leftIcon" color="#fff" size="20"></up-icon>
					<text :style="{fontSize:fontSizeBig + 'rpx' }"
						style="color:#fff;margin-left:5rpx;">{{leftText}}</text>
				</view>
			</template>
			<template #center>
				<view class="u-nav-slot flex-start">
					<text style="font-size: 30rpx;color:#fff;margin-left:5rpx;">{{title}}</text>
				</view>
			</template>
			<template #right>
				<view style="font-size: 30rpx;">
					<slot></slot>
				</view>
			</template>
		</up-navbar>

	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		title: {
			type: String,
			default: "",
		},
		backStatus: {
			type: Boolean,
			default: false,
		},
		barFixed: {
			type: Boolean,
			default: true,
		},
		borderStatus: {
			type: Boolean,
			default: false,
		},
		leftIcon: {
			type: Boolean,
			default: true,
		},
		leftText: {
			type: String,
			default: "",
		},
		rightText: {
			type: String,
			default: "",
		},
		bgColor: {
			type: String,
			default: "#fff",
		},
		titleWidth: {
			type: String,
			default: "400rpx",
		},
		leftIconSize: {
			type: String,
			default: "20px",
		},
		leftIconColor: {
			type: String,
			default: "#303133",
		},
		bgColor: {
			type: String,
			default: "#11102A",
		},
		fontSizeBig: {
			type: Number,
			default: 30
		}
	})

	const rightClick = () => {

	}
</script>

<style>
	.navBar {
		background: #11102A;
	}

	.navBar /deep/ .u-navbar__content__title {
		line-height: 100%;
		color: #fff !important;
		/* display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; */
	}

	:deep(.u-border-bottom) {
		border-color: #1F1757 !important;
	}

	/* .u-border-bottom{
		border-color:
	} */
	/* 	.u-border-bottom {
		border-color: #1F1757 !important;
	} */
</style>